/***********************布局***********************/
.relative {
  position: relative;
}
.flex {
  display: flex;
}
.flex-wrap {
  display: flex;
  flex-wrap: wrap;
}
.flex-J-C {
  display: flex;
  justify-content: center;
}
.flex-J-SB {
  display: flex;
  justify-content: space-between;
}
.flex-J-SA {
  display: flex;
  justify-content: space-around;
}
.flex-J-SE {
  display: flex;
  justify-content: space-evenly;
}

.flex-A-C {
  display: flex;
  align-items: center;
}
.flex-A-B {
  display: flex;
  align-items: baseline;
}
.flex-A-STR {
  display: flex;
  align-items: stretch;
}
.flex-col {
  display: flex;
  flex-direction: column;
}
.flex-row {
  display: flex;
  flex-direction: row;
}

.self-J-C {
  justify-self: center;
}
.self-J-STR {
  justify-self: stretch;
}
.self-J-STA {
  justify-self: flex-start;
}
.self-J-END {
  justify-self: flex-end;
}
.self-A-C {
  align-self: center;
}
.self-A-STA {
  align-self: flex-start;
}
.self-A-END {
  align-self: flex-end;
}
.self-A-STR {
  align-self: stretch;
}
.inline-flex {
  display: inline-flex;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
._flex {
  display: flex !important;
}
._block {
  display: block !important;
}
._inline-block {
  display: inline-block !important;
}
._inline {
  display: inline !important;
}
@for $i from 0 through 30 {
  .flex-#{$i} {
    flex: $i;
  }
  .z-I-#{$i} {
    position: relative;
    z-index: $i;
  }
}
.T-A-L {
  text-align: left;
}
.T-A-C {
  text-align: center;
}
.T-A-R {
  text-align: right;
}
/***********************间距***********************/
// 定义间距映射
$gaps: (
  "xxs": 3px,
  "xs": 6px,
  "sm": 10px,
  "md": 16px,
  "lg": 20px,
  "xl": 24px,
  "xxl": 30px,
  "auto": auto,
  "0": 0,
);
// 循环生成样式；
// 例：PD-sm = padding:var(--gap-sm);
// PD-sm-md = padding:var(--gap-sm) var(--gap-md);
// PD-row-sm = padding-left:var(--gap-sm); padding-right:var(--gap-sm);
@each $key, $value in $gaps {
  // Padding 相关样式
  .PD-#{$key} {
    padding: var(--gap-#{$key});
  }
  @each $subKey, $subValue in $gaps {
    .PD-#{$key}-#{$subKey} {
      padding: var(--gap-#{$key}) var(--gap-#{$subKey});
    }
  }
  .PD-row-#{$key} {
    padding-left: var(--gap-#{$key});
    padding-right: var(--gap-#{$key});
  }
  .PD-col-#{$key} {
    padding-top: var(--gap-#{$key});
    padding-bottom: var(--gap-#{$key});
  }
  .PT-#{$key} {
    padding-top: var(--gap-#{$key});
  }
  .PB-#{$key} {
    padding-bottom: var(--gap-#{$key});
  }
  .PL-#{$key} {
    padding-left: var(--gap-#{$key});
  }
  .PR-#{$key} {
    padding-right: var(--gap-#{$key});
  }

  // Margin 相关样式
  .MG-#{$key} {
    margin: var(--gap-#{$key});
  }
  @each $subKey, $subValue in $gaps {
    .MG-#{$key}-#{$subKey} {
      margin: var(--gap-#{$key}) var(--gap-#{$subKey});
    }
  }
  .MG-row-#{$key} {
    margin-left: var(--gap-#{$key});
    margin-right: var(--gap-#{$key});
  }
  .MG-col-#{$key} {
    margin-top: var(--gap-#{$key});
    margin-bottom: var(--gap-#{$key});
  }
  .MT-#{$key} {
    margin-top: var(--gap-#{$key});
  }
  .MB-#{$key} {
    margin-bottom: var(--gap-#{$key});
  }
  .ML-#{$key} {
    margin-left: var(--gap-#{$key});
  }
  .MR-#{$key} {
    margin-right: var(--gap-#{$key});
  }

  // 最高权重 Padding 相关样式
  ._PD-#{$key} {
    padding: var(--gap-#{$key}) !important;
  }
  @each $subKey, $subValue in $gaps {
    ._PD-#{$key}-#{$subKey} {
      padding: var(--gap-#{$key}) var(--gap-#{$subKey}) !important;
    }
  }
  ._PD-row-#{$key} {
    padding-left: var(--gap-#{$key}) !important;
    padding-right: var(--gap-#{$key}) !important;
  }
  ._PD-col-#{$key} {
    padding-top: var(--gap-#{$key}) !important;
    padding-bottom: var(--gap-#{$key}) !important;
  }
  ._PT-#{$key} {
    padding-top: var(--gap-#{$key}) !important;
  }
  ._PB-#{$key} {
    padding-bottom: var(--gap-#{$key}) !important;
  }
  ._PL-#{$key} {
    padding-left: var(--gap-#{$key}) !important;
  }
  ._PR-#{$key} {
    padding-right: var(--gap-#{$key}) !important;
  }

  // 最高权重 Margin 相关样式
  ._MG-#{$key} {
    margin: var(--gap-#{$key}) !important;
  }
  @each $subKey, $subValue in $gaps {
    ._MG-#{$key}-#{$subKey} {
      margin: var(--gap-#{$key}) var(--gap-#{$subKey}) !important;
    }
  }
  ._MG-row-#{$key} {
    margin-left: var(--gap-#{$key}) !important;
    margin-right: var(--gap-#{$key}) !important;
  }
  ._MG-col-#{$key} {
    margin-top: var(--gap-#{$key}) !important;
    margin-bottom: var(--gap-#{$key}) !important;
  }
  ._MT-#{$key} {
    margin-top: var(--gap-#{$key}) !important;
  }
  ._MB-#{$key} {
    margin-bottom: var(--gap-#{$key}) !important;
  }
  ._ML-#{$key} {
    margin-left: var(--gap-#{$key}) !important;
  }
  ._MR-#{$key} {
    margin-right: var(--gap-#{$key}) !important;
  }

  // Gap 相关样式
  .gap-#{$key} {
    gap: var(--gap-#{$key});
  }
}
page {
  @each $key, $value in $gaps {
    --gap-#{$key}: #{$value};
  }
}
